<template>
  <div class="memberComponent" v-if="control">
    <collapseComponent
      v-for="(cr, crIndex) in control.right"
      :key="cr.id"
      :title="cr.name"
      direction="column"
      :open="cr.open"
      :rightIndex="crIndex"
      @switchCollapse="switchCollapse"
    >
      <div
        class="catalog"
        v-for="(crc, crcIndex) in cr.catalog"
        :key="crc.id"
        :style="{ display: crc.display }"
      >
        <component
          v-bind:is="crc.controlName"
          v-if="crc.display === 'block'"
          :item="crc"
          :id="control.id"
          :rightIndex="crIndex"
          :catalogIndex="crcIndex"
          @updateParent="updateParent"
        ></component>
      </div>
    </collapseComponent>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Bus from "@/utils/bus";
export default {
  name: "memberComponent",
  data() {
    return {
      control: null,
      //为了防止页面初始化时，触发不必要的通知更新，此处设置标识符，初始化后2秒置为true
      needUpdate: false,
    };
  },
  created() {},
  props: ["controlsIndex", "controlData"],
  components: {
    collapseComponent: () => import("../../../components/collapseComponent"),
    radioComponent: () => import("./lone/radioComponent"),
    chooseImageComponent: () => import("./lone/chooseImageComponent"),
    chooseLinkComponent: () => import("./lone/chooseLinkComponent"),
    colorComponent: () => import("./lone/colorComponent"),
    sliderComponent: () => import("./lone/sliderComponent"),
    setMemberBgComponent: () => import("./group/setMemberBgComponent"),
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    setTimeout(() => {
      this.needUpdate = true;
    }, 1000);
  },
  methods: {
    //初始化
    init() {
      if (this.controlData) {
        this.control = null;
        this.$nextTick(() => {
          this.control = JSON.parse(JSON.stringify(this.controlData));
        });
      }
    },
    //从单个子组件中更新到大类组件这里来
    updateParent(params) {
      let p = JSON.parse(params),
        ri = p.rightIndex,
        ci = p.catalogIndex,
        pe = p.ename,
        pv = p.value;
      //显示风格
      if (pe === "showStyle") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        if(pv==1) {
          //风格1
          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "underlyingBgColor") {
                  row.display = "none";
                }
                if(row.ename == "underlyingBgImg") {
                  row.display = "none";
                }
              })
            }
          })
        }else if(pv==2){
          //风格2
          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "underlyingBgColor") {
                  row.display = "block";
                }
                if(row.ename == "underlyingBgImg") {
                  row.display = "block";
                }
              })
            }
          })
        }
      }

      //显示布局
      if (pe === "showLayout") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //显示设置
      if (pe === "showSetBtn") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //显示电话
      if (pe === "showPhone") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //实名认证,跳转链接
      if (pe === "authLink") {
        let v = pv.split("__vlon__");
        this.control.right[ri].catalog[ci].linkName = v[1];
        this.control.right[ri].catalog[ci].linkUrl = v[0];
        this.control.main[pe] = v[1];
        this.control.main.authLinkName = v[0];
      }

      //设置,跳转链接
      if (pe === "setLink") {
        let v = pv.split("__vlon__");
        this.control.right[ri].catalog[ci].linkName = v[1];
        this.control.right[ri].catalog[ci].linkUrl = v[0];
        this.control.main[pe] = v[1];
        this.control.main.setLinkName = v[0];
      }

      //设置背景，是颜色还是图片
      if (pe === "bgColorSet") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;

        if(pv == "color") {
          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "bgColor") {
                  row.display = "block";
                }
                if(row.ename == "bgImg") {
                  row.display = "none";
                }
              })
            }
          })
        }

        if(pv == "img") {
          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "bgColor") {
                  row.display = "none";
                }
                if(row.ename == "bgImg") {
                  row.display = "block";
                }
              })
            }
          })
        
        }
      }

      //设置背景，颜色
      if (pe === "bgColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //设置背景，图片
      if (pe === "bgImg") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //底层背景颜色
      if (pe === "underlyingBgColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //底层背景图片
      if (pe === "underlyingBgImg") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //名称文字颜色
      if (pe === "nameColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //上间距
      if (pe === "paddingTop") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //下间距
      if (pe === "paddingBottom") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //左右间距
      if (pe === "paddingLR") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //上边角
      if (pe === "borderRadiusTop") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //下边角
      if (pe === "borderRadiusBottom") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //更新到vuex
      this.updateControls(this.control, p.needUpdateMain);

      //更新到main中的子组件
      if (p.needUpdateMainChild) {
        const emitName = this.control.ename + this.control.id;
        //更新到main中具体组件中的数据
        if (this.needUpdate) {
          Bus.$emit(emitName, JSON.stringify(this.control));
        }
      }
    },
    //拉抽屉
    switchCollapse(params) {
      this.control.right[params.rightIndex].open = params.open;
      this.updateControls(this.control);
    },
    //更新到vuex
    updateControls(control, needUpdateMain) {
      if (this.needUpdate) {
        let controls = this.decorate.controls;
        controls[this.controlsIndex] = JSON.parse(JSON.stringify(control));
        this.$store.dispatch("controls", controls);
        if (needUpdateMain) {
          Bus.$emit("updateMain");
        }
      }
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.memberComponent {
  .catalog {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 15px 10px 0px;
    box-sizing: border-box;
  }
}
</style>